<template>
	<view class="list">
		<view class="setting">
			<view @click="setStatus(2)" v-if="status === 1">
				<image :src="ossUrl + `/static/23.png`" mode=""></image>
				管理
			</view>
			<view v-if="status === 2" @click="setAll">
				全选
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="onReachBottomReset">
			<template v-if="list.length > 0">
				<view class="list-item" v-for="it in list"  @click="setKey(it.collect_id,it.id)">
					<view class="list_item">
						<image class="list_item-img" :src="it.img" mode="aspectFill"></image>
						<view class="list_item-content">
							<view class="list_item-content-h">
								{{it.title}}
							</view>
							<view class="list_item-content-subTitle">
								教练：{{it.nickname}}
							</view>
							<view class="list_item-content-address">分类：{{it.name}}</view>
						</view>
						<view class="list_item-rig" v-if="status === 2">
							<image :src="keys.includes(it.collect_id) ? ossUrl + '/static/image/g.png' : ossUrl + `/static/1.png`" mode=""></image>
						</view>
					</view>
				</view>
			</template>
			<view class="noData" style="padding-bottom:120rpx;" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			</view>
			<u-gap :height="75"></u-gap>
		</scroll-view>
		<view class="btns" v-if="status == 2" @click="del">删除</view>
	</view>
</template>

<script>
	import {
		InformationUserCollect,
		InformationDelUserCollect
	} from '@/common/http/api.js'
	export default {
		props: {
			circle_id: {
				type: Number,
				default: () => 0
			},
		},
		data() {
			return {
				params: {
					page: 1,
					type: 2,
					circle_id: 0
				},
				isList: true,
				list: [],
				status: 1,
				keys: []
			}
		},
		// created() {
		// 	this.reload()
		// },
		watch:{
			circle_id: {
				handler(val){
					this.params.circle_id = val
					this.reload()
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:'/pagesB/teachingCourses/teachingCourses?id='+id
				})
			},
			del() {
				if (this.keys.length === 0) {
					uni.showToast({duration:3000,
						title: '请选择数据',
						icon: 'none'
					})
					return false
				}
				uni.showModal({
					title: '',
					content: '确定取消收藏吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#12B475',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确认按钮');

							let data = {
								id: this.keys.join(','),
								type: 2
							}
							uni.showLoading()
							InformationDelUserCollect(data).then(res => {
								this.reload()
							}).finally(err => {
								uni.hideLoading()
							})
							// 在这里添加用户点击确认后的逻辑
						} else if (res.cancel) {
							console.log('用户点击取消按钮');
							// 在这里添加用户点击取消后的逻辑
						}
					}
				});


			},
			setAll() {
				if (this.keys.length === this.list.length) {
					this.keys = []
				} else {
					this.keys = this.list.map(i => i.collect_id)
				}
			},
			setKey(e,id) {
				if(this.status === 1) {
					this.toDetail(id)
				} else {
					console.log('e', e)
					if (this.keys.includes(e)) {
						this.keys = this.keys.filter(i => i != e)
					} else {
						this.keys.push(e)
					}
				}
				
			},
			setStatus(e) {
				this.status = e
				this.keys = []
			},
			reload() {
				this.params.page = 1
				this.list = []
				this.init()
			},
			onReachBottomReset() {
				console.log('触底')
				if (this.isList) {
					this.params.page++
					this.init()
				}
			},
			init() {
				// if(this.params.circle_id === 0) return
				uni.showLoading()
				InformationUserCollect(this.params).then(res => {
					if (Array.isArray(res.data) && res.data.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				}).finally(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;

		.list-item {
			width: 100%;
			border-bottom: 10rpx solid #F6F7F8;
			background: #FFFFFF;

			.list_item {
				box-sizing: border-box;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 200rpx;
					height: 142rpx;
					margin-right: 32rpx;
				}

				.list_item-content {
					width: 350rpx;

					.list_item-content-h {

						margin-bottom: 32rpx;
						font-family: PingFang;
						font-weight: 800;
						font-size: 28rpx;
						color: #131313;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.list_item-content-subTitle {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 27rpx;


					}

					.list_item-content-address {
						min-width: 0;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;

						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
		}
	}

	.setting {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		view {
			font-family: PingFang;
			font-weight: 500;
			font-size: 30rpx;
			color: #12B475;
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 5rpx;
			}
		}
	}

	.btns {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 121rpx;
		background: #12B475;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.scroll-Y {
		width: 100vw;
		height: calc(100vh - 35rpx - 77rpx);
	}
</style>